<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jxtPro - demo</title>

<link rel="stylesheet" href="/assets/layui/css/layui.css" media="all">
<!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
<!--[if lt IE 9]>
	<script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
	<script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<script src="/assets/layui/layui.js" charset="utf-8" ></script>


</head>
<body>
	<style>
		.table thead tr th {width: 160px;margin-top:5px;}
		.table thead tr th span {color:red;}
		.table tbody tr td button{margin:10px;}
	</style>
	
	<div style="margin:100px 100px; width:1200px; height: 520px;">
		<table class="table">
			<thead>
				<tr>
					<th><span>1.</span>导入导出excel</th>
					<th><span>2.</span>上传图片,下载文件</th>
					<th><span>3.</span>select 选择</th>
					<th><span>4.</span>select 二级联动</th>
					<th><span>5.</span>百度编辑器的简单使用</th>
					<th><span>6.</span>全选/全不选</th>
					<th><span>7.</span>ztree的使用</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td align="center">
						<!--  1.导入导出excel -->
						<div class="layui-inline layui-upload">
							  <button type="button" style="margin-right:5px; background:none;color:black; width:150px; border: 1px solid #cccccc;" class="layui-btn layui-btn-normal" id="importExcel">选择文件...</button>
							  <button type="button" class="layui-btn layui-btn-normal" id="ensure">导入</button>
							  <button type="button" class="layui-btn layui-btn-normal" id="exportExcel">导出</button>
						</div>
					</td>
					<td align="center">
						<div>
							<button type="button" class="layui-btn" id="uploadImg">
							  <i class="layui-icon">&#xe67c;</i>上传图片
							</button>
							<div id="result"></div>
							
							<button type="button" class="layui-btn" id="submit">
							  <i class="layui-icon">&#xe67c;</i>提交图片
							</button>
						</div>
					</td>
					<td align="center">3</td>
					<td align="center">4</td>
					<td align="center">5</td>
					<td align="center">6</td>
					<td align="center">7</td>
				</tr>
				
			</tbody>
		</table>
	</div>

</body>

<script>

layui.use(['upload','jquery','laydate'], function(){
	var $ = layui.jquery,load
	,laydate = layui.laydate
	,upload = layui.upload;
	<!--  3.select 选择 -->
	<!--  4.select 二级联动 -->
	<!--  5.百度编辑器的简单使用 -->
	<!--  6.全选/全不选 -->
	<!--  7.ztree的使用 -->
	
	<!--  1.导入导出excel -->
	//Excel文件上传组件
	upload.render({
	    elem: '#importExcel'
	    ,url: '/demo/importExcel'
	    ,auto: false
	    ,exts: 'xls|xlsx'
	    ,multiple: true
	    ,bindAction: '#ensure'
    	,before: function(obj){ //obj参数包含的信息，跟 choose回调完全一致，可参见上文。
    		if($(".layui-upload-file").val() !=null && $(".layui-upload-file").val()!=""){
    			load = layer.load(2); //上传loading
    		}else{
    			//未选中文件
    			layer.alert("请选择文件");
    		}
    	 }
	    ,done: function(res){
	    	if(res){
	    		console.log(res)
	    		layer.close(load);
	    		layer.alert(res.msg);
	    	}
	    }
	 });
	
  $('#exportExcel').on('click',function(){
	  var html  = '';
	  var date1  = '<div class="layui-inline">';
	  	  date1 += ' <label class="layui-form-label" style="color:red; white-space:nowrap;">开始日期 *：</label>';
	   	  date1 += ' <input  type="text" name="startTime" class="layui-input" id="date1">';
	   	  date1 += '</div>';
      var date2  = '<div class="layui-inline">';
      	  date2 += ' <label class="layui-form-label" style="color:red; white-space:nowrap;">结束日期 *：</label>';
	   	  date2 += ' <input  type="text" name="endTime" class="layui-input" id="date2">';
	   	  date2 += '</div>'; 
	   	  
	  html = date1 + date2;
	  
	  layer.open({
	    title: '导出指数Excel数据'
	    ,content: html
	    ,btn: ['确定导出', '取消']
	  	,yes: function(index, layero){
	  		// 数据校验
	  		var d1 = $('#date1').val();
	  		var d2 = $('#date2').val();
	  		if(!d1){
	  			alert('请选择开始时间');
	  		}
	  		if(!d2){
	  			alert('请选择结束时间');
	  		}
	  		
	  		var param = {};
	  		param['startTime'] = d1;
	  		param['endTime'] = d2;
	  		var load = layer.load();
	  		window.location.href = '/demo/exportExcel?startTime='+d1+'&endTime='+d2;
	  		//TODO 也可以发送 ajax 请求
	  		layer.close(index);
	  		layer.close(load);
	  		
	    }
	  });
	  
	  laydate.render({
		    elem: '#date1'
		    ,format: 'yyyy-MM-dd' //可任意组合
		    ,value: ''
		    ,theme: 'grid'
	  });
	  
	  laydate.render({
		    elem: '#date2'
		    ,format: 'yyyy-MM-dd' //可任意组合
		    ,value: ''
		    ,theme: 'grid'
	  });
	});
	<!--  1.导入导出excel 结束 -->
	<!--  2.上传图片,下载文件 -->
	 //执行实例
	  upload.render({
	    elem: '#uploadImg' //绑定元素
	    ,url: '/demo/uploadImg' //上传接口
	    ,method:'post'
	    ,done: function(res, index, upload){
	      //上传完毕回调
	      console.log(res);
	      if(res.code == 0){
	    	  layer.msg(res.msg);
	      }
	    }
	    ,error: function(res){
	      //请求异常回调
	    	  console.log(JSON.stringify(res));
	    },
	    auto:false,
	    bindAction:"#submit"
 	,choose: function(obj){
 	    	//将每次选择的文件追加到文件队列
	 	    var files = obj.pushFile();
	 	    //预读本地文件，如果是多文件，则会遍历。(不支持ie8/9)
	 	    obj.preview(function(index, file, result){
		 	    //这里还可以做一些 append 文件列表 DOM 的操作
		 	    $('#result').append('<img alt="" src="'+result+'" onclick="remove('+index+')">');
		 	    //obj.upload(index, file); //对上传失败的单个文件重新上传，一般在某个事件中使用
		 	    //delete files[index]; //删除列表中对应的文件，一般在某个事件中使用
	 	    });
	    }
	  });
	<!--  2.上传图片,下载文件 结束 -->
});

<!--  2.上传图片,下载文件 开始 -->
function remove(index){
	delete files[index]; 
} 
<!--  2.上传图片,下载文件 结束 -->
	
</script>
</html>